.content-box {
	.coupon-box {
		position: relative;
		padding: 10rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		.no-coupon {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			border-radius: 10rpx;
			.img {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 170rpx;
				height: 170rpx;
			}
		}
	}
	.card-box {
		position: relative;
		display: inline-flex;
		width: 100%;

		.coupon-bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 168rpx;
		}

		.coupon-msg {
			position: relative;
			width: 100%;
			height: 168rpx;
			flex-direction: row;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.coupon-tit {
				width: 410rpx;
				padding-left: 30rpx;
				padding-right: 30rpx;
				.name {
					.tit {
						font-weight: bold;
						font-size: 32rpx;
						color: #54bd63;
					}
				}

				.time {
					margin-bottom: 10rpx;
					.tit {
						font-size: 22rpx;
						color: #aaa;
					}
				}
				.rules-mode {
					display: flex;
					align-items: center;
					justify-content: space-between;
					.use-rules {
						display: flex;
						align-items: center;
						.tit {
							font-size: 22rpx;
							color: #aaa;
							margin-right: 10rpx;
						}
					}
				}
			}

			.btn-box {
				flex: 1;
				display: flex;

				.btn-tit {
					margin: auto;
					border-radius: 50px;
					background-color: #fff;
					padding: 10rpx 25rpx;
					text-align: center;
					font-size: 24rpx;
					color: #54bd63;
					font-weight: bold;
				}
				.gary {
					background-color: #d1d1d1;
				}
			}
		}
	}
	.rules-box {
		background-color: #ebedf0;
		padding: 20rpx 15rpx;
		border-radius: 15rpx;
		margin-top: 10rpx;
		transition: all 0.3s;
		.tit {
			font-size: 22rpx;
			font-weight: bold;
			color: #292b2e;
		}
		.rules {
			font-size: 22rpx;
			margin-top: 10rpx;
		}
	}
}
